<template>
  <transition name="play-box">
    <div
      class="play-box-wrapper"
      v-if="show"
      @click.self="$emit('close')"
    >
      <div class="play-box">
        <div class="t">
          <div class="clear">清空</div>
        </div>
        <div class="c">
          <li v-for="d in playlist" :key="d.id" >
            <div class="status"></div>
            <div class="info">
              <h3>{{ d.song }}</h3>
              <p>{{ d.singer }}</p>
            </div>
            <div class="del"></div>
          </li>
        </div>
        <div class="b" @click="$emit('close')">关闭</div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    ...mapState(["playlist"]),
  },

};
</script>

<style lang="sass">
.play-box-wrapper
  position: fixed
  z-index: 100
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: rgba(0, 0, 0, .8)
  .play-box
    position: absolute
    top: 30%
    right: 0
    bottom: 0
    left: 0
    background: #ccc
.play-box-enter,
.play-box-leave-to
  opacity: 0
  .play-box
    transform: translateY(100%)
.play-box-enter-active,
.play-box-leave-active
  transition: .6s
  .play-box
    transition: .3s .3s
</style>
